<template>
  <div style="margin-bottom: 20px;">
    <el-dialog append-to-body v-dialogDrag :visible.sync="edit_flag"
               @open="handleOpenConfig" :before-close="handleClose" width="1100px">
      <!--<el-button class="filter-item" size="small" style="margin-left: 10px;margin-top: 10px;" type="primary" v-waves @click="cleanClick">清理</el-button>-->
      <div class="edit-table-header pad-t-b10">
        <span style="font-size: 16px;font-weight: bold;">{{edit_main_title}}</span>
        <el-button style="margin-left: 10px;" type="primary" class="edit-add-position"  @click="cleanClick">清理</el-button>
      </div>
      <el-table :data="table_data" v-loading="loadingShow"
                element-loading-text="加载中" border fit highlight-current-row
                style="padding: 0 6px;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            <span>{{scope.$index+1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="stockId" width="140" align="center" label="库存ID"></el-table-column>
        <!--<el-table-column prop="skuId" width="140" align="center" label="车架号信息ID"></el-table-column>-->
        <el-table-column prop="qty" width="80" align="center" label="库存量"></el-table-column>
        <el-table-column prop="storeHouseId" width="140" align="center" label="仓库ID"></el-table-column>
        <!--<el-table-column prop="locationId" width="140" align="center" label="库位ID"></el-table-column>-->
        <!--<el-table-column prop="lotNo1" width="140" align="center" label="车架号"></el-table-column>-->
        <el-table-column prop="storeHouseName" width="140" align="center" label="仓库名称"></el-table-column>
        <el-table-column prop="inboundTme" width="140" align="center" label="入库时间"></el-table-column>
        <el-table-column prop="remarks" width="140" align="center" label="备注"></el-table-column>
        <el-table-column prop="inboundUser" width="100" align="center" label="入库操作人"></el-table-column>
        <el-table-column prop="areaLocation" width="100" align="center" label="库区库位"></el-table-column>
        <el-table-column prop="shipmentGid" width="140" align="center" label="指令号"></el-table-column>
      </el-table>
      <!--btn-->
      <el-row type="flex" justify="end" style="margin-top: 20px;">
        <el-button type="primary" @click="handleClose">关闭</el-button>
      </el-row>
      <div style="height:20px"></div>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
  import * as stockAPI from '@/api/stock/stock'
  export default {
    name: '',
    components: {},
    props: ['edit_flag', 'edit_main_title', 'edit_select_row', 'edit_params'],
    data() {
      return {
        title_data: {},
        table_loading: false,
        selectRow: [], // table选中数组
        loadingShow: false,
        page: {
          current: 1,
          size: 10,
          total: 1,
          condition: {
            name: ''
          }
        },
        table_data: []
      }
    },
    methods: {
      // 弹窗页打开初始
      handleOpenConfig(data) {
        this.getList()
      },
      // 清理库存
      cleanClick() {
        const that = this
        if (that.checkSelect(that.selectRow)) {
          this.$confirm('将清理选中的数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const ids = []
            that.selectRow.map(item => {
              ids.push(item.stockId)
            })
            const stockId = ids.length > 0 ? ids.join(',') : ids[0]
            stockAPI.cleanStock({ stockId }).then(result => {
              that.$message({
                message: '操作成功',
                type: 'success',
                duration: 2000
              })
              that.getList()
            }).catch(err => {
              console.log('error', err)
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        }
      },
      getList() {
        const that = this
        const toParmas = {
          skuId: that.edit_select_row.skuId,
          lotNo1: that.edit_select_row.lotNo1,
          storeHouseId: that.edit_select_row.storeHouseId
        }
        stockAPI.queryStockQtyDetail(toParmas).then(res => {
          that.table_data = res.data
          that.loadingShow = false
        }).catch(err => {
          console.log('error', err)
          that.loadingShow = false
        })
      },
      // 表格选中改变时
      handleSelectionChange(val) {
        this.selectRow = val
      },
      // 关闭
      handleClose() {
        this.$emit('edit-close', false)
      },
      // 检查是否选择单条
      checkSelect(data) {
        const l = data.length
        if (l === 0) {
          this.$message({
            message: '未选择',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        return true
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
